<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>剧本文件</title>
    <title>任务日志</title>
    <!--xterm-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='plugins/xterm/xterm.css') }}">

    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }
    </style>
</head>

<div id="term">
</div>

<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<!--xterm-->
<script type="text/javascript" src="{{ url_for('static', filename='plugins/xterm/xterm.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='plugins/xterm/addons/fit/fit.js') }}"></script>
<script>
    var mark = '';
    var url = '{{ url_for("ops.api-celery-task-log", pk=task_id) }}';
    var term;
    var end = false;
    var error = false;
    var interval = 1000;
    var success = true;

    function setTermSize(ele) {
        $(ele).css("height", document.documentElement.clientHeight)
            .css("width", document.documentElement.clientWidth)
            .css('box-sizing', 'border-box')
            .css("padding-left", '5px')
    }
    function requestAndWrite() {
        if (!end && success) {
            success = false;
            $.ajax({
                url: url + '?mark=' + mark,
                method: "GET",
                contentType: "application/json; charset=utf-8"
            }).done(function(result, textStatue, jqXHR) {
                success = true;
                if (jqXHR.status !== 200) {
                    error = true;
                    term.write('.');
                    interval = 2000;
                }
                if (jqXHR.status === 200){
                    term.write(result.data.data);
                    mark = result.data.mark;
                    if (result.data.end){
                        end = true
                    }
                }
            })
        }
    }
    $(document).ready(function () {
        setTermSize(document.getElementById('term'));
        Terminal.applyAddon(fit);  // 自适应大小
        term = new Terminal({
            screenKeys: true,
            useStyle: true,
            cursorBlink: true, //光标闪烁
            //cursorStyle: 'underline', //光标样式
            theme: {
                foreground: '#fff',   //字体
                background: '#000' //背景色
            },
            fontFamily: '"Monaco", "Consolas", "monospace"',
            fontSize: 14
        });
        term.open(document.getElementById('term'));
        term.fit();
        term.clear();
        term.on('data', function (data) {
            {#term.write(data.replace('\r', '\r\n'))#}
            term.write(data);
        });
        window.onresize = function () {
            resize()
        };
        {#$('.terminal').detach().appendTo('#term');#}
        setInterval(function () {
            requestAndWrite()
        }, interval)
    });
</script>
